<template>
  <div class="orders">
    <!-- 顶部导航栏 -->
    <div class="orders-header">
      <ordersHeader />
    </div>

    <!-- 地址、个人信息确认 -->
    <div class="orders-address">
      <ordersAddress />
    </div>

    <!-- 购买商品信息 -->
    <div class="orders-information">
      <ordersInformation :list="list" v-if="r" />
      <template v-else >
      <ordersInformation  v-for="item in list"  :list="item" />
    </template>
    </div>

    <!-- 购买商品金额 -->
    <div class="orders-amount">
      
      <ordersAmount :list="list"/>
    
    </div>

    <!-- 底部支付 -->
    <div class="orders-pay">
      <ordersPay :list="list" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import ordersHeader from '@/views/orders/components/orders-header.vue'
import ordersAddress from '@/views/orders/components/orders-address.vue'
import ordersInformation from '@/views/orders/components/orders-information.vue'
import ordersAmount from '@/views/orders/components/orders-amount.vue'
import ordersPay from '@/views/orders/components/orders-pay.vue'

import { useRoute } from 'vue-router'
import { useGoodsStore } from '@/stores/goods'

const router = useRoute()
//仓库实例
const goodsStore = useGoodsStore()
goodsStore.getGoodsList()

//商品id
const goodsId = router.fullPath.split('=')[1]

const list = ref<goodsList | null>(null)


const r = ref(true)

watchEffect(() => {
  // 更具传入商品id找出对应数据
 
  if(goodsId){
 // @ts-ignore
  list.value = goodsStore.goodslist?.filter((item) => item.id === goodsId)[0]
  }else{
     // @ts-ignore
    list.value =JSON.parse(localStorage.getItem('cartList'))
    r.value = false
    
  }
})

// setTimeout(() => {
//   console.log(list.value);
// },300)

defineOptions({
  name: 'orders'
})
</script>

<style scoped>
.orders {
  width: 100%;
  /* height: 100%; */
  background-color: #f4f4f4;
}
.orders-address {
  width: 100%;
  height: 106px;
  background-color: #ffffff;
}
.orders-amount {
  width: 100%;
  /* height: 366px; */
  background-color: #fff;
  margin-top: 12px;
  margin-bottom: 12px;
  border-radius: 12px;
}
</style>
